<script setup>
import ScanningCode from './components/ScanningCode.vue'
import ArealDistribution from './components/ArealDistribution.vue'
import CenterShow from './components/CenterShow.vue'
import LocationCount from './components/LocationCount.vue'
import SiteCodeCount from './components/SiteCodeCount.vue'
import ScanningCodeTrend from './components/ScanningCodeTrend.vue'
import { inject, reactive, onMounted } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  baseInfo: [],
  otherInfo: {},
})

function getData() {
  $http.get('/screen/page/code').then(res => {
    const { data = [] } = res || {}
    const {
      baseInfo = [],
      czTotal = 0, // 常住人口
      fczTotal = 0, // 非常住人口
      scanTotal = 0, // 扫码总数
    } = data || {}

    dataObj.baseInfo = baseInfo || []
    dataObj.otherInfo = {
      czTotal: czTotal || 0,
      fczTotal: fczTotal || 0,
      scanTotal: scanTotal || 0,
    }
  })
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="mainContent">
    <div class="contentTop">
      <ScanningCode class="topLeft" />

      <div class="topRight">
        <div class="rightTop">
          <div class="numBox">
            <img class="icon" src="@/assets/qrcode/icon1.png" />

            <div class="numData">
              <div class="name">今日扫码总人数</div>

              <div class="num">{{ dataObj.otherInfo.scanTotal }}<span class="unit">个</span></div>
            </div>
          </div>

          <div class="numBox">
            <img class="icon" src="@/assets/qrcode/icon2.png" />

            <div class="numData">
              <div class="name">常住人口</div>

              <div class="num">{{ dataObj.otherInfo.czTotal }}<span class="unit">个</span></div>
            </div>
          </div>

          <div class="numBox">
            <img class="icon" src="@/assets/qrcode/icon3.png" />

            <div class="numData">
              <div class="name">非常住人口</div>

              <div class="num">{{ dataObj.otherInfo.fczTotal }}<span class="unit">个</span></div>
            </div>
          </div>
        </div>

        <div class="rightBottom">
          <CenterShow :list="dataObj.baseInfo" />

          <div class="bottomRight">
            <LocationCount class="centerTop" />

            <ScanningCodeTrend class="centerBottom" />
          </div>
        </div>
      </div>
    </div>

    <div class="contentBottom">
      <ArealDistribution />

      <SiteCodeCount class="bottomRight" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.mainContent {
  display: flex;
  flex-direction: column;

  .contentTop {
    flex: 1;
    display: flex;

    .topLeft {
      flex: 1;
    }

    .topRight {
      margin-left: 16px;
      display: flex;
      flex-direction: column;

      .rightTop {
        height: 100px;
        padding-left: 87px;
        background: rgba(19, 181, 177, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;

        .numBox {
          flex: 1;
          display: flex;
          align-items: center;

          .icon {
            width: 50px;
            height: 50px;
          }

          .numData {
            flex: 1;
            align-items: center;
            margin-left: 7px;

            .name {
              height: 20px;
              font-size: 14px;
              color: #ffffff;
              display: flex;
              align-items: center;
            }

            .num {
              margin-top: 7px;
              height: 29px;
              font-size: 24px;
              font-weight: bold;
              font-family: Tahoma-Bold, Tahoma;
              color: #ffffff;
              line-height: 1;
              background: linear-gradient(180deg, #64cdab 0%, #49d0ff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;

              .unit {
                margin-left: 4px;
                font-size: 14px;
                color: #ffffff;
                background: #ffffff;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }

      .rightBottom {
        margin-top: 16px;
        display: flex;

        .bottomRight {
          margin-left: 16px;
          display: flex;
          flex-direction: column;

          .centerBottom {
            margin-top: 16px;
          }
        }
      }
    }
  }

  .contentBottom {
    margin-top: 16px;
    display: flex;

    .bottomRight {
      margin-left: 16px;
    }
  }

  .part1 {
    height: 100%;
    display: flex;
    flex: 2;
    flex-direction: row;

    .situaItem {
      flex: 1;
      display: flex;
      flex-direction: column;

      .situaNode {
        flex: 1;
        margin: 0.8vh;
      }
    }
  }
}
</style>
